<template>
    <el-container id="app">
        <!--   <el-header id="header"
            >&lt;!&ndash;MEViewer&ndash;&gt;

        </el-header>-->

        <div id="leftSide" style="display: none">
            <Menubar />
        </div>

        <el-main id="main">
            <Main />
        </el-main>
        <div id="rightSide">
            <router-view />
        </div>
        <Widgets />
    </el-container>
</template>

<script>
import Menubar from "./modules/app/Menubar";
import Main from "./modules/app/Main";
import Page from "./plugins/utils/page";
import Widgets from "./modules/app/Widgets";

export default {
    name: "app",

    components: { Main, Menubar,Widgets },

    data() {
        return {};
    },

    methods: {},

    mounted() {
        let app = document.getElementById("app");
        Page.setPageHeight(app.clientHeight);
        Page.setPageWidth(app.clientWidth);
    }
};
</script>

<style>
html,
body,
#app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}

#main {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#header {
    /*  width: 100%;
    font-size: 60px;
    text-align: left;
    color: white;
    line-height: 60px;
    background: #111111;*/
}

#setting {
    margin: 10px 2px;
    color: white;
    background-color: #14acba;
    border: 0px;
}
#leftSide {
    width: 201px;
    top: 85px;
    left: 14px;
    z-index: 1;
    position: absolute;
    margin: 0;
    padding: 0;
}

#rightSide {
    width: 200px;
    top: 100px;
    left: 10px;
    z-index: 1;
    position: absolute;
    margin: 0;
    padding: 0;
}
.el-form-item label:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.el-form-item .el-select {
    vertical-align: middle;
}
</style>
